<template>
    <!--会员卡详情-->
    <div>
        <div class="content">
            <div class="card-big">
                <p class="name">{{memberMap.membershipCardName}}</p>
                <p class="value">
                    <em>{{memberMap.cardFace}}</em>
                    <span>会员卡</span>
                </p>
                <p class="number">
                    <em>NO.</em>
                    <span>{{memberMap.membershipCardId}}</span>
                </p>
                <img :src="memberMap.pictureAddress" height="142">
            </div>
            <div class="card-btn">
                <input type="button" value="确认购买" @click="createOrder($event)">
            </div>
            <div class="card-box whole" v-if="orderInfo">
                <div class="tit">
                    <span>订单详情</span>
                </div>
                <div class="con">
                    <ul class="rule-list">
                        <li>
                            <label>订单编号：</label>
                            <span>{{orderInfo.orderMap.OrderId}}</span>
                        </li>
                        <li>
                            <label>下单时间：</label>
                            <span>{{orderInfo.orderMap.timeOrder}}</span>
                        </li>
                        <li>
                            <label>支付时间：</label>
                            <span>{{orderInfo.orderMap.timeOrder}}</span>
                        </li>
                        <li>
                            <label>总价：</label>
                            <span>￥{{orderInfo.orderMap.orderAmount/100}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-box">
                <div class="tit">
                    <span>使用规则</span>
                </div>
                <div class="con">
                    <ul class="rule-list">
                        <li v-for="v in memberMap.note">
                            <em class="point"></em>
                            <span class="rule">{{v}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-box" v-if="!orderInfo">
                <div class="con">
                    <a href="javascript:void(0)" class="link" @click="queryOther()">
                        <span>查看适用分店（2）</span>
                        <i class="icon-right fr"></i>
                    </a>
                </div>
            </div>
        </div>

        <form method="post" id="goshopping" :action="etsUrl+'h5pay/index.do?newVersion=1.0'">
            <input type="hidden" :value="val" :name="key" v-for="(val,key) in toshopdetail"/>
        </form>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {Indicator} from 'mint-ui';
    export default {
        name: "cardDetail",

        methods:{
            async createOrder(e){
                //console.log(this.getYanQianParam);
                //点击确认购买，发起请求，生成订单，并把按钮改成付款，再点击的时候就跳转商户去付款了。    判断是否是第一次进来
                let btn = e.currentTarget;
                if(btn.getAttribute('flag')!=='changed'){
                    var orderAmount = Object.assign({},this.memberObj);//深度copy对象，不双向绑定
                    let params = {
                        inputCharset:'1',//字符集格式 1 UTF-8
                        version:'1.0',//固定值1.0
                        orderCurrency:'0',//订单金额币种类型      0代表人民币
                        appId:'TLA0001',//接入机构送TLA0001
                        pickupUrl:this.etsUrl+'service/index.html?'+this.getYanQianParam+'#/goodsDetail',//返回地址
                        receiveUrl:this.etsUrl+'service/index.html?'+this.getYanQianParam+'#/goodsDetail',//服务器接受支付结果的后台通知
                        merchantId:this.memberObj.merchantId,//商户号
                        orderAmount:Number(orderAmount.purchaseAmount*100),//2000
                        productId:this.memberObj.membershipCardId,//商品id-----会员卡号
                        subBusinessType:"0110",//subBusinessType
                        // payRule:'00',//00:支付 01:试算
                        //orderExpireDatetime:'2880',//订单有效期
                        productName:this.memberObj.membershipCardName //订单名称
                        //payType:'0'//支付方式0
                     };

                    //console.log(this.$store.getters.getToshopdetail);
                    //同步调用后台接口
                    await this.$store.dispatch('createOrder',params);
                    //下面是回填页面订单信息，然后是回调支付地址
                    this.orderInfo = this.$store.getters.getOrderInfo;
                    btn.setAttribute('flag','changed');
                    btn.value = '付款';

                }else{
                    //去付款
                    /*Toast({
                        message:'去付款'//,
                        //className:'mint-toast-icon mintui mintui-success'
                    });*/
                    //http://test.allinpay.com/h5pay/index.do
                    this.toshopdetail = await this.$store.getters.getOrderInfo.toshopdetail;

                    console.log(this.toshopdetail);

                    //因为取数据的时候是异步的，所以递归，有数据了才提交表单
                    Indicator.open();//防止重复表单提交，一个加载中的遮罩层
                    var content = function(){
                        let myform = document.getElementById('goshopping');
                        if(null!=myform&&myform.length>0){
                            myform.submit();
                        }else{
                            setTimeout(function(){
                                content();
                            },1000);
                        }
                    }
                    content();

                }
            },
            //      /cardDetailGoods
            async queryOther(){
                let params = {
                    //membershipCardId:'00000059',//会员卡id
                    membershipCardId:this.memberObj.membershipCardId,//会员卡id
                    //merchantId:'008310153110000',//商户号
                    merchantId:this.memberObj.merchantId,//商户号
                    cityId:this.selectedCity.cityno,//城市编号
                    longitude:this.longitude,//经度
                    latitude:this.latitude//纬度
                    //longitude:'31',
                    //latitude:'131',
                    //cityId:'310115'
                };
                await this.$store.dispatch('queryOtherGoods',params);
                this.$router.push({path:'/cardDetailGoods'});
            }
        },
        data(){
            return {
                orderInfo:null,
                toshopdetail:{},
                memberObj:{}//会员对象
            }
        },
        created(){
            //console.log('页面参数'+JSON.stringify(this.$route.params.memberObj));
            this.memberObj = JSON.parse(sessionStorage.getItem('memberObj'));
            //this.memberObj = this.$route.params.memberObj;
            var params = {
                //memberCode:'00000058'
                memberCode:this.memberObj.membershipCardId    //会员卡号
            };

            this.$store.dispatch('loadCardDetail',params);
            this.$store.commit('setImgBaseUrl',process.env.NODE_ENV);//process.env.NODE_ENV获取配置文件是dev还是build  值分别为development和production
        },
        computed:{
            memberMap(){
                return this.$store.getters.getMemberMap;
            },
            getYanQianParam(){
                return this.$store.getters.getYanQianParam;//获取验签参数
            },
            ...mapGetters({
                selectedCity:'getSelectedCity',//选中的城市
                etsUrl:'getEtsUrl',
                longitude:'getLongitude',//经度
                latitude:'getLatitude'//纬度
            })
        }
    }
</script>

<style scoped>

</style>
